<template>
  <!-- Email-->
  <div>
    <el-dialog v-el-drag-dialog :visible.sync="emailDialog" width="80%">
      <el-card style="height:600px; overflow: auto;width: 100%;">
        <!-- 信息搜索框 -->
        <el-form v-model="queryObj" label-width="100px" size="large">
          <el-row>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-input v-model.trim="queryObj.tag" placeholder="标签" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="Host">
                <el-input v-model.trim="queryObj.host" placeholder="Host" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="账号">
                <el-input v-model.trim="queryObj.account" placeholder="账号" />
              </el-form-item>
            </el-col>
            <el-col v-show="isopen" :span="6">
              <el-form-item label="密码">
                <el-input v-model.trim="queryObj.password" placeholder="密码" />
              </el-form-item>
            </el-col>
            <el-col v-show="isopen" :span="6">
              <el-form-item label="端口">
                <el-input v-model="queryObj.port" placeholder="端口" />
              </el-form-item>
            </el-col>
            <el-col v-show="isopen" :span="6" style="margin-right: 15px">
              <el-form-item label="是否SSL加密">
                <el-select v-model.trim="queryObj.enableSsl">
                  <el-option :value="true" label="是" />
                  <el-option :value="false" label="否" />
                </el-select>
              </el-form-item>
            </el-col>
            <searchbutton :isopen="isopen" @isopenclickfn="isopenclick" @resetQueryfn="resetQuery" @queryClickfn="queryClick" />
          </el-row>
        </el-form>
        <!-- 调整状态按钮 -->
        <el-row style="margin-bottom: 10px">
          <div style="float: left">
            <el-button type="primary" plain @click="AddEmailClick"><i class="el-icon-plus" /> 添加Email配置</el-button>
          </div>
          <div style="float: right" />
        </el-row>

        <!-- 任务总表 -->
        <el-table
          ref="table"
          v-loading="listLoading"
          :data="tableData"
          border
          height="500px"
          :row-style="{height:'40px'}"
          :cell-style="{padding:'0px'}"
          style="width: 100%;  margin-bottom: 10px;"
        >
          <el-table-column width="100" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="editClick(scope.row)">{{ $t('button.Edit') }}</el-button>
              <el-button type="text" size="small" @click="deleteClick(scope.row)">{{ $t('button.Delete') }}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="tag" label="标签" align="center" />
          <el-table-column prop="host" label="Host" align="center" />
          <el-table-column prop="account" label="账号" align="center" />
          <el-table-column prop="password" label="密码" align="center" />
          <el-table-column prop="port" label="端口" align="center" />
          <el-table-column prop="enableSsl" label="是否SSL加密" align="center">
            <template slot-scope="scope">
              {{ scope.row.enableSsl?'是':"否" }}
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <paging style="margin-right:30px" :pagion-obj="pagionObj" :handle-size-change="handleSizeChange" :handle-page-change="handlePageChange" />
      </el-card>
    </el-dialog>
    <!-- 新增Email配置 -->
    <el-dialog top="3vh" width="500px" :before-close="AddEmailClose" :visible.sync="AddEmailDialog">
      <el-form ref="AddEmail" :model="AddEmailData" size="small" label-width="120px">
        <el-form-item label="标签">
          <el-input v-model.trim="AddEmailData.tag" placeholder="标签" />
        </el-form-item>
        <el-form-item label="Host">
          <el-input v-model.trim="AddEmailData.host" placeholder="Host" />
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model.trim="AddEmailData.account" placeholder="账号" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model.trim="AddEmailData.password" placeholder="密码" />
        </el-form-item>
        <el-form-item label="端口">
          <el-input v-model="AddEmailData.port" placeholder="端口" />
        </el-form-item>
        <el-form-item label="是否SSL加密">
          <el-switch v-model="AddEmailData.enableSsl" active-text="是" inactive-text="否" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain size="medium" @click="AddEmailConfirm">{{ $t('button.Confirm') }}</el-button>
          <el-button size="medium" @click="AddEmailClose">{{ $t('button.Cancel') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 编辑Email配置 -->
    <el-dialog top="3vh" width="500px" :before-close="editEmailClose" :visible.sync="editEmailDialog">
      <el-form ref="editEmail" :model="editEmailData" size="small" label-width="120px">
        <el-form-item label="标签">
          <el-input v-model.trim="editEmailData.tag" placeholder="标签" />
        </el-form-item>
        <el-form-item label="Host">
          <el-input v-model.trim="editEmailData.host" placeholder="Host" />
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model.trim="editEmailData.account" placeholder="账号" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model.trim="editEmailData.password" placeholder="密码" />
        </el-form-item>
        <el-form-item label="端口">
          <el-input v-model="editEmailData.port" placeholder="端口" />
        </el-form-item>
        <el-form-item label="是否SSL加密">
          <el-input v-model.trim="editEmailData.enableSsl" placeholder="enableSsl" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain size="medium" @click="editEmailConfirm">{{ $t('button.Confirm') }}</el-button>
          <el-button size="medium" @click="editEmailClose">{{ $t('button.Cancel') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

import {
  AddEmail,
  UpdateEmail,
  DeleteEmail,
  getEmail,
  SendEmail
} from '@/api/SRM'
import elDragDialog from '@/components/el-drag-dialog' // base on element-ui
import { Message } from 'element-ui'
import permission from '@/permission/index.js' // 权限判断指令
export default {
  name: 'Email',
  directives: { permission, elDragDialog },
  props: {
    // emailDialog: {
    //   type: Boolean,
    //   required: true
    // }
  },
  data() {
    return {
      // 查询数据
      queryObj: {
        'page': 0,
        'size': 0,
        'tag': '',
        'host': '',
        'account': '',
        'password': '',
        'port': 0,
        'enableSsl': true
      },
      // 分页的数据
      pagionObj: {
        size: 50,
        currentPage: 1,
        total: 100
      },
      // 请求返回的数据
      tableData: [],
      tableDataAll: [],
      // 时间的数据
      timestart_end: [],
      isopen: false,
      // 页面loding效果
      listLoading: true,
      emailDialog: false,
      // 列位置是否显示
      deleteCell: {
        companyName: true,
        leaderName: true,
        tell: true,
        email: true,
        money: true,
        address: true
      },
      // excel 数据的key 表头数据
      headersArr: [
        '标签',
        'Host',
        '账号',
        '密码',
        '端口',
        '是否SSL加密'
      ],
      // 将表头转换成中文
      headersRelations: {
        标签: 'tag',
        Host: 'host',
        账号: 'account',
        密码: 'password',
        端口: 'port',
        是否SSL加密: 'enableSsl'
      },
      // 新增Email配置的数据及弹窗
      AddEmailDialog: false,
      AddEmailData: {
        'tag': '',
        'host': '',
        'account': '',
        'password': '',
        'port': 0,
        'enableSsl': true
      },
      // 编辑Email配置的数据及弹窗
      editEmailDialog: false,
      editEmailData: {
        'id': 0,
        'tag': '',
        'host': '',
        'account': '',
        'password': '',
        'port': 0,
        'enableSsl': true
      }
    }
  },
  mounted() {
    this.queryData()
  },
  methods: {
    /** 获取页面数据*/
    async queryData() {
      this.listLoading = true
      this.queryObj.size = this.pagionObj.size
      this.queryObj.page = this.pagionObj.currentPage
      const res = await getEmail(this.queryObj)
      this.tableData = res.data.data
      this.pagionObj.pageCount = res.data.pageCount
      this.pagionObj.total = res.data.count
      this.listLoading = false
    },
    // 搜索按钮
    queryClick() {
      this.pagionObj.currentPage = 1
      this.queryData()
    },
    /** 每页显示数据变化*/
    handleSizeChange(val) {
      this.pagionObj.size = val
      this.queryData()
    },
    /** 当前页变化*/
    handlePageChange(val) {
      this.pagionObj.currentPage = val
      this.queryData()
    },
    // 时间选择器处理
    handleDataChanged() {
      if (this.timestart_end !== null) {
        this.queryObj.startTime = this.timestart_end[0]
        this.queryObj.endTime = this.timestart_end[1]
      } else {
        this.queryObj.startTime = null
        this.queryObj.endTime = null
      }
    },
    // 展开收起
    isopenclick() {
      this.isopen = !this.isopen
    },
    // 重置
    resetQuery() {
      this.queryObj.tag = ''
      this.queryObj.host = ''
      this.queryObj.account = ''
      this.queryObj.password = ''
      this.queryObj.port = ''
      this.queryObj.enableSsl = ''
      this.timestart_end = []
    },
    //
    EmailClick() {
      this.emailDialog = true
    },
    // 新增Email配置
    AddEmailClick() {
      this.AddEmailDialog = true
      this.AddEmailData = {
        'tag': '',
        'host': '',
        'account': '',
        'password': '',
        'port': 0,
        'enableSsl': true
      }
    },
    // 新增Email配置确认
    async AddEmailConfirm() {
      await AddEmail({
        'tag': this.AddEmailData.tag,
        'host': this.AddEmailData.host,
        'account': this.AddEmailData.account,
        'password': this.AddEmailData.password,
        'port': this.AddEmailData.port,
        'enableSsl': this.AddEmailData.enableSsl
      })
      Message.success('操作成功')
      this.queryData()
      this.AddEmailDialog = false
    },
    // 新增Email配置关闭
    AddEmailClose() {
      this.AddEmailData = {
        'tag': '',
        'host': '',
        'account': '',
        'password': '',
        'port': 0,
        'enableSsl': true
      }
      this.AddEmailDialog = false
    },
    // 编辑
    editClick(data) {
      this.editEmailData.id = data.id
      this.editEmailData.tag = data.tag
      this.editEmailData.host = data.host
      this.editEmailData.account = data.account
      this.editEmailData.password = data.password
      this.editEmailData.port = data.port
      this.editEmailData.enableSsl = data.enableSsl
      this.editEmailDialog = true
    },
    // 编辑的确认
    async editEmailConfirm() {
      await UpdateEmail(this.editEmailData)
      Message.success('操作成功')
      this.queryData()
      this.editEmailDialog = false
    },
    // 编辑弹窗关闭
    editEmailClose() {
      this.editEmailData = {
        'id': 0,
        'tag': '',
        'host': '',
        'account': '',
        'password': '',
        'port': 0,
        'enableSsl': true
      }
      this.editEmailDialog = false
    },
    // 删除
    deleteClick(data) {
      this.$confirm('确认删除当前Email吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await DeleteEmail({ id: data.id })
          this.queryData()
          Message.success('操作成功')
        })
        .catch(() => {})
    }

  }
}
</script>

<style>

</style>
